---
title: "Computational Documents"
subtitle: "Html Widgets: leaflet & crosstalk"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    theme: lumen
    source_code: embed
---

```{r setup, include=FALSE}
library(tidyverse)
library(geojsonio)
library(crosstalk)
library(leaflet)
library(d3scatter)
library(DT)

election  = geojsonio::geojson_read("data/election.json", what = "sp")
election@data = election@data %>%
  mutate(소득 = (소득*0.0001) %>% round, 노령화지수 = 노령화지수 %>% round)

colnames(election@data) = colnames(election@data) %>% str_replace(" ","")

pal = colorFactor(c("#0D7440", "#2A88C5",  "#C10D0D"), c("국민의당", "더불어민주당","새누리당"))

# 툴팁에 담을 정보 생성
labs = lapply(seq(nrow(election@data)), function(i) {
  paste0( '
', election@data[i, "선거구"]," : ",election@data[i, "읍면동명"], '
', 
          "당선 : ", election@data[i, "당선"], '
', 
          "국민의당 : ", election@data[i, "국민의당"],'
', 
          "더불어민주당 : ", election@data[i, "더불어민주당"], '
',
          "새누리당 : ", election@data[i, "새누리당"], '
') 
})

# 선거구 경계 생성
election_gu = maptools::unionSpatialPolygons(election, election$선거구)

shared_elec = SharedData$new(election)
shared_elec_df = SharedData$new(election@data, group=shared_elec$groupName())
shared_elec_dt = crosstalk::SharedData$new(election@data %>%
                 select(선거구,당선,읍면동명,소득,노령화지수, 새누리당, 더불어민주당, 국민의당), group=shared_elec$groupName())
```

Inputs {.sidebar data-width=400}
-----------------------------------------------------------------------




### 대한민국 제20대 총선

서울특별시 지역구 개표결과

```{r}
filter_checkbox("당선", "당선", shared_elec_df, ~당선, inline=T)
filter_slider("소득", "소득(만 원)", shared_elec_df, ~소득, width="75%")
filter_slider("노령화지수", "노령화지수", shared_elec_df, ~노령화지수, width="75%")
filter_select("행정동", "행정동", shared_elec_df, ~읍면동명)
filter_select("선거구", "선거구", shared_elec_df, ~선거구)
```

---

[Computational Documents](jhgan00.github.io/computational_docs) 튜토리얼의 예시 문서 입니다.

**Contact:**

- jhgan00@gmail.com


**Github Repo:**

- https://github.com/jhgan00/computational_docs


**Reference:**

- [Gapminder data using crosstalk](https://rpubs.com/rcatlord/gapminder_crosstalk_updated)
- [flexdashboard](https://rmarkdown.rstudio.com/flexdashboard/layouts.html)
- [국회의원 선거 예측](https://github.com/lhmlhm1111/Data_GongHak), 연세대학교 데이터공학 4달러 조


Column {data-height=450}
-------------------------------------

### DataTable

```{r table}
DT::datatable(shared_elec_dt, width="100%")
```


Column {data-height=450}
-------------------------------------

### Map

```{r map}
leaflet(shared_elec) %>%
  addProviderTiles("CartoDB.Positron") %>% 
  setView(126.982, 37.5502, zoom=10) %>%
  addPolygons(
    fillColor = ~pal(당선),
    weight = 1,
    opacity = 1,
    color = "white",
    dashArray=3,
    fillOpacity = 0.5,
    label = lapply(labs, htmltools::HTML)) %>%
  addLegend(pal = pal, values = ~당선, opacity = 0.7, title = NULL, position = "bottomright") %>%
  addPolylines(
    data=election_gu,
    weight = 1.5,
    opacity = 1,
    color = "black")
```


### Plot

```{r plot}
d3scatter(shared_elec_df, ~소득, ~노령화지수, ~당선, width="100%", height=250)
```